<template>
  <el-tabs v-model="activeTab" tab-position="left" class="vertical-tabs" @tab-click="handleTabClick">
    <el-tab-pane 
      v-for="tab in tabs" 
      :key="tab.name" 
      :name="tab.name"
    >
      <template #label>
        <div class="tab-item">
          <i :class="tab.icon"></i>
          <span>{{ tab.label }}</span>
        </div>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'FunctionTabs',
  data() {
    return {
      activeTab: 'image',
      tabs: [
        { name: 'image', label: '图片', icon: 'el-icon-picture' },
        { name: 'tool', label: '工具', icon: 'el-icon-s-tools' },
        { name: 'template', label: '模板', icon: 'el-icon-files' },
        { name: 'background', label: '背景', icon: 'el-icon-picture-outline' },
        { name: 'element', label: '元素', icon: 'el-icon-s-grid' },
        { name: 'layer', label: '层', icon: 'el-icon-s-fold' },
        { name: 'adjust', label: '调整', icon: 'el-icon-setting' }
      ]
    };
  },
  methods: {
    handleTabClick(tab) {
      this.$emit('tab-change', tab.name);
    }
  }
};
</script>

<style lang="scss" scoped>
.vertical-tabs {
  width: 100%;
  height: 100%;

  :deep(.el-tabs__nav) {
    width: 100%;
  }

  :deep(.el-tabs__item) {
    width: 100%;
    height: calc(100% / 7);
    line-height: 1.2;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.el-tabs__active-bar) {
    width: 3px;
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 10px 0;

    i {
      font-size: 24px;
      margin-bottom: 4px;
    }

    span {
      font-size: 12px;
    }
  }
}
</style> 